﻿@using DataAccess;
@model PetFosterage
@{
    ViewData["Title"] = "宠物寄养";
}
<div style="width:1020px;margin:auto;">
    <div style="margin-top:9px;height:100px;">
        <a href='@ViewData["bannerAdvertUrl"]' target="_blank" @@click="advertClickHandle(@ViewData["bannerAdvertID"])"><img src='@ViewData["bannerAdvertImg"]' style="width:1020px; height:100px;" /></a>
    </div>
    <div style="margin-top:25px;font-size:22px;font-weight:bold;">寄养公告</div>
    @{
        if(string.IsNullOrEmpty(Model.content))
        {
            <div style="text-align:center;margin-bottom:20px;font-size:16px;margin-top:15px;">暂无公告</div>
        }
        else
        {
            <div style="text-align:left;margin-bottom:20px;font-size:16px;margin-top:15px; padding-left:30px;padding-right:30px;">@Html.Raw(Model.content)</div>
        }
    }
    @{
        if (!string.IsNullOrEmpty(Model.imgsrcs) || !string.IsNullOrEmpty(Model.videosrc))
        {
            <div style="margin-top:40px;text-align:left;font-size:20px;font-weight:bold;">寄养SHOW</div>
            <div style="background-color:black;height:1px; border:none;margin-top:10px;"></div>
        }
        }
    @{
        if (!string.IsNullOrEmpty(Model.imgsrcs))
        {
            string[] imgUrls = Model.imgsrcs.Split('|');
            for (int i = 0; i < imgUrls.Length; i++)
            {
                string imgurl = imgUrls[i];
                if (i == 0)
                {
                    <div style="float:left;margin-top:20px;"><img src='/file/@ViewData["subDomain"]/imgs/@imgurl' style="width:326px; height:220px;" /></div>
                }
                else
                {
                    <div style="float:left;margin-top:20px;margin-left:20px;"><img src='/file/@ViewData["subDomain"]/imgs/@imgurl' style="width:326px; height:220px;" /></div>
                }
            }
        }
    }
    @{
        if (!string.IsNullOrEmpty(Model.videosrc))
        {
            <div style="clear:both;"></div>
            <div style="margin-top:30px;width:1020px;display:flex;">
            <div style="border:1px solid;border-color:silver;background-color:lightgray;display:flex;margin:auto;">
                <video width="670" height="400" controls>
                    <source src="/file/@ViewData["subDomain"]/videos/@Model.videosrc" type="video/mp4">
                    <source src="/file/@ViewData["subDomain"]/videos/@Model.videosrc" type="video/ogg">
                    <source src="/file/@ViewData["subDomain"]/videos/@Model.videosrc" type="video/webm">
                    您的浏览器不支持 video 属性。
                </video>
            </div>
            </div>
        }
    }
</div>
@section Scripts {
    <script type="text/javascript">
        $("#petFosterage").css("color", "red");

        var app = new Vue({
            el: "#app",
            mounted: function () {
                $("#app").show();//vue渲染完后显示界面
            },
            methods: {
                advertClickHandle(val) {
                    axios.post('../Home/AdvertClick', {
                        "advertID": val
                    }).then(response => {
                        console.log(response.data);
                    }, error => {
                        alert("错误提示：" + error.message);
                    });
                },
            },
            data() {
                return {
                }
            }
        });
    </script>
}
